import React, { Component } from 'react'
import Styled from 'styled-components'
import constants from 'utils'
import { StyledSplit } from 'style'
import Modal from './deleteAllModal'
import Table from './table'
import Tag from './tags'

const StyledLeft = Styled.div`
  width: 100%;
  height: 100%;
  .label-left-icon{
    padding-right: 10px;
    cursor: pointer;
  }
  .label-left-hidden-icon{
    padding-right: 10px;
    display: none;
    cursor: pointer;
  }

  .label-row:hover .label-left-hidden-icon,
  .label-row-active:hover .label-left-hidden-icon
  {
    display: inline-block;
  }

  .label-row:hover {
    background-color: ${constants.COLOR_HOVER};
  }
  .label-row-active {
    background-color: ${constants.COLOR_ACTIVE};
    color: #FFFFFF
  }
`

export default class LeftView extends Component {
  render() {
    return (
      <StyledLeft>
        <StyledSplit split="horizontal" minSize={200} defaultSize={400}>
          <Table />
          <Tag />
        </StyledSplit>
        <Modal />
      </StyledLeft>
    )
  }
}
